<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>报废工序</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
    <meta name="author" content="${site.author}"/>
    <link rel="icon" href="${site.logo}">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${base}/static/jquery-easyui-1.7.0/themes/default/easyui.css" media="all" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/user.css" media="all" />

</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
  <legend>报废数据检索</legend>
  <div class="layui-field-box">
    <form class="layui-form" id="searchForm">           
    <div class="layui-inline" style="margin-left: 15px">
            <label>报废日期:</label>
                <div class="layui-input-inline">
                    <input type="text" name="s_beginScrapDate" id="beginScrapDate" lay-verify="date"  autocomplete="off" class="layui-input">
                </div>
                <span>-</span>
                <div class="layui-input-inline">
                    <input type="text" name="s_endScrapDate" id="endScrapDate" lay-verify="date"  autocomplete="off" class="layui-input">
                </div>
                </div>
        <div class="layui-inline">
            <a class="layui-btn" lay-submit="" lay-filter="searchForm">查询</a>
        </div>
        <div class="layui-inline" >
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
</fieldset>
<br>
<fieldset class="layui-elem-field">
  <legend>每工序报废（默认显示上周）</legend>
    <div style="width:100%;height: calc(76vh);margin:0 auto;">
         <div id="main" style="height:100%;"></div>
        </div>
</fieldset>


<div id="page"></div>
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/tools.js"></script>
 <script type="text/javascript" src="${base}/static/echarts/echarts.min.js"></script>
 <script type="text/javascript" src="${base}/static/jquery-easyui-1.7.0/jquery.min.js"></script>
 
<script>
    layui.use(['layer','form','laydate'], function() {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                laydate = layui.laydate;
        var beginScrapDate= laydate.render({//渲染开始时间选择
            elem: '#beginScrapDate', //通过id绑定html中插入的start
            type: 'date',
            max:"2099-12-31",//设置一个默认最大值
            done: function (value, dates) {
                endScrapDate.config.min ={
                    year:dates.year,
                    month:dates.month-1, //关键
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                };
            }
        });
        var endScrapDate= laydate.render({//渲染结束时间选择
            elem: '#endScrapDate',//通过id绑定html中插入的end
            type: 'date',
            min:"1970-1-1",//设置min默认最小值
            done: function (value, dates) {
                beginScrapDate.config.max={
                    year:dates.year,
                    month:dates.month-1,//关键
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                }
            }
        });
        
    	$.ajax({
    		url:'byProcess',
    		dataType:'json',
    		type:'post',
    		success:function(data){		
    			setOption_byProcess(getWeek(data.byProcess),getInput(data.byProcess),getScrap(data.byProcess),getScrapRate(data.byProcess),getScrapTarget(data.byProcess),getMaxInput(data.byProcess));
    		}
    	}); 
    	
        form.on("submit(searchForm)",function(data){
          	$.ajax({
        		url:'byProcess',
        		dataType:'json',
        		type:'post',
          		data:data.field,
        		success:function(data){		
        			setOption_byProcess(getWeek(data.byProcess),getInput(data.byProcess),getScrap(data.byProcess),getScrapRate(data.byProcess),getScrapTarget(data.byProcess),getMaxInput(data.byProcess));
        		}
        	}); 
            return false;
        });

        
        
        
        var DailymyChart = echarts.init(document.getElementById('main'));
        function setOption_byProcess(week,Input,scrap,rate,target,maxInput){		
        option = {
        		   title: {
                       text: ''
                   },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            crossStyle: {
        	                color: '#999'
        	            }
        	        }
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    legend: {
        	        data: ['scrap', 'Input', 'Scrap rate','Target']
        	    },
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: week,
        	            axisLabel: {                                           
        	            	interval:0,                                           
        	            	rotate:20                                        
        	            	},
        
        	            axisPointer: {
        	                type: 'shadow'
        	            }
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value',
        	            name: 'Input Qty',
        	            min: 0,
        	            max: maxInput,
        	            interval: maxInput/10,
        	            axisLabel: {
        	                formatter: '{value}'
        	            }
        	        },
        	        {
        	            type: 'value',
        	            name: 'Scrap Rate',
        	            min: 0,
        	            max: 20,
        	            interval: 2,
        	            axisLabel: {
        	                formatter: '{value}%'
        	            }
        	        }
        	    ],
        	    series: [
        	        {
        	            name: 'Scrap',
        	            type: 'bar',
        	            data: scrap
        	        },
        	        {
        	            name: 'Input',
        	            type: 'bar',
        	            data: Input
        	        },
        	        {
        	            name: 'Scrap rate',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: rate
        	        },
        	        {
        	            name: 'Target',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: target
        	        }
        	    ]
        	};
        DailymyChart.setOption(option);
        }
        function getMaxInput(data){
        	var maxInput=10000;
        	for(var i=0;i<data.length;i++){
        		if (data[i].input >maxInput){
        			maxInput=data[i].input;
        		}
        	}
        	maxInput=maxInput+(maxInput*0.05);
        	maxInput = maxInput.toFixed(0);
        	return maxInput;
        }
        
        
        function getWeek(data){
        	key=[];
        	for(var i=0;i<data.length;i++){
        		key[i] = data[i].weeks;
        	}
        	return key ;
        }
        
        function getInput(data){
        	key=[];
        	for(var i=0;i<data.length;i++){
        		key[i] = data[i].input;
        	}
        	return key ;
        }
        
        function getScrap(data){ 	
        	key=[];
        	for(var i=0;i<data.length;i++){
        		key[i] = data[i].scrap;
        	}
        	return key ;
        }
        
        function getScrapRate(data){ 	
        	key=[];
        	for(var i=0;i<data.length;i++){
        		key[i] = (((data[i].scrap) / (data[i].input))*100).toFixed(2);
        	}

        	return key ;
        }
        
        function getScrapTarget(data){ 	
        	key=[];
        	for(var i=0;i<data.length;i++){
        		key[i] =  data[i].target*100;
        	}
        	return key ;
        }
        
    });
</script>
</body>
</html>